<!--商品详情页-->
<template>
<!--  商品展示详情页-->
  <div>
    <el-row :gutter="10">
     <el-col :span="10">
       <img src="/imgs/b.jpg" alt="">
     </el-col>
     <el-col :span="14">
       <div style="width: 450px;">
         <h1>{{ merchandise.name }}</h1>
         <p>价钱:{{ merchandise.price }}元</p>
         <el-form>
           <el-form-item label="数量">
             <el-input-number v-model="boughtTing.num" :min="1" :max="10000"></el-input-number>
           </el-form-item>
         </el-form>
         <p>{{ merchandise.norms }}</p>
         <p>{{ merchandise.additional }}</p>
         <el-button type="primary" style="width: 100%;" @click="showDialog = true">立即购买</el-button>
       </div>
     </el-col>
    </el-row>
  </div>

  <!-- 确认购买的弹出框 -->
  <el-dialog title="购买确认" v-model="showDialog" width="30%">
    <el-form>
      <el-form-item label="备注">
        <el-input v-model="boughtTing.notes" type="textarea" :rows="4" placeholder="请输入备注信息"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDialog = false">取消</el-button>
          <el-button type="primary" @click="buyit">确定购买</el-button>
        </span>
    </template>
  </el-dialog>


</template>



<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

//用户选择购买的商品数量
var value = ref(1);

//从url中获取商品id参数
const merchandiseId = new URLSearchParams(window.location.search).get('id');
//从url中获取商户id参数
const merchandiseUserId = new URLSearchParams(window.location.search).get('userId');

// 定义对象用来保存商品数据
const merchandise = ref({});

//定义加载商品信息的方法
const selectMerchandise = ()=>{
  console.log("当前商品详情页面的商品id是",merchandiseId);
  axios.get(BASE_URL+'/v1/merchant/select?id='+merchandiseId).then((response)=>{
    if (response.data.state == 2002){
      merchandise.value = response.data.data[0];
      console.log(merchandise.value);
    }else {
      ElMessage.error(response.data.message);
    }
  })
}

// ↓ 定义一个user用于获取当前登录用户的信息
const user =ref(getUser());

//页面加载完毕后立即加载商品信息
onMounted(()=>{
  selectMerchandise();
})

//定义“确认购买”按键点击后出现的页面
const showDialog = ref(false);//默认关闭
// ↓ 定义备注信息
const remark = ref("");

//定义要购买的商品的信息
const boughtTing = ref({
  merchantid:parseInt(merchandiseId,10),
  adminid:parseInt(merchandiseUserId,10),
  userid:user.value.id,
  num:'',
  notes:'',
  address:user.value.address,
  status:'待发货'
})

//点击立即购买按钮的点击事件 ↓
const buyit = ()=>{

  console.log("确认购买的商品",boughtTing.value);

  axios.post(BASE_URL+'/order/User/insertOrder',boughtTing.value).then((response)=>{
    if (response.data.state == 2002){
      ElMessage.success("购买成功yeahhhhh");
      showDialog.value = false;//关闭对话框
      boughtTing.value = {};//清空数据
    }else {
      ElMessage.error(response.data.message);
    }
  })
}

</script>



<style scoped>

</style>